import React, {Component} from 'react';
import {NavLink} from "react-router-dom";
import "./registerPage.css"

class Register extends Component {
    render() {
        return (
            <div className="register_box">
                <h2>
                    欢迎你的加入
                    <svg t="1636858386347" className="register_top_icon" viewBox="0 0 1352 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="5281" width="200" height="200">
                        <path
                            d="M314.843459 798.682145a25.155241 25.155241 0 0 1-17.772725-42.927966l177.007704-177.007704a25.145168 25.145168 0 1 1 35.55984 35.55984l-177.007704 177.007704a25.126459 25.126459 0 0 1-17.787115 7.368126z"
                            fill="#CDC1AD" p-id="5282"/>
                        <path
                            d="M314.872241 798.682145a25.155241 25.155241 0 0 1-21.399224-11.886859L3.856753 320.070583a25.155241 25.155241 0 0 1 34.538089-34.638825l466.753485 289.688218a25.15668 25.15668 0 0 1-26.522374 42.755275L103.153758 384.84389l233.132098 375.429022a25.14085 25.14085 0 0 1-21.341661 38.409233z"
                            fill="#0E4F53" p-id="5283"/>
                        <path
                            d="M347.021445 492.948107a25.14085 25.14085 0 0 1-18.909604-41.733524l112.651732-128.769507a25.155241 25.155241 0 0 1 37.86238 33.099002L412.730158 430.865893l55.735841-9.641883a25.14085 25.14085 0 0 1 8.562567 49.547766l-125.704251 21.744605a24.263007 24.263007 0 0 1-4.30287 0.431726z"
                            fill="#9B4537" p-id="5284"/>
                        <path
                            d="M572.382473 814.785529a25.14085 25.14085 0 0 1-10.73559-47.892817l273.599225-128.769506a25.145168 25.145168 0 0 1 21.413615 45.503931l-273.599225 128.798289a25.011332 25.011332 0 0 1-10.678025 2.360103z"
                            fill="#CDC1AD" p-id="5285"/>
                        <path
                            d="M699.094085 905.318493a25.270368 25.270368 0 0 1-14.54917-4.677033l-112.651732-80.473746a25.155241 25.155241 0 0 1 29.184685-40.942026l102.592514 73.278311 210.955766-64.039372 243.335225-133.835093-179.698797 40.826899a24.853033 24.853033 0 0 1-5.569266 0.633198h-112.579778a25.155241 25.155241 0 1 1 0-50.296092h109.845512l351.324315-79.840548a25.14085 25.14085 0 0 1 17.68638 46.554466L936.543444 833.810259a26.666283 26.666283 0 0 1-4.820942 2.014722l-225.317855 68.414197a25.486231 25.486231 0 0 1-7.310562 1.079315zM847.161749 618.50845a25.212805 25.212805 0 0 1-24.881815-28.983213L885.038519 181.587239l-173.409986 349.698146a25.14085 25.14085 0 1 1-45.043424-22.349021L911.920665 13.991164a25.14085 25.14085 0 0 1 47.374745 15.009677l-87.381365 568.180339a25.155241 25.155241 0 0 1-24.752296 21.32727z"
                            fill="#0E4F53" p-id="5286"/>
                        <path
                            d="M540.161314 1023.971218a25.155241 25.155241 0 0 1-24.838642-28.983212l32.177986-209.18569a24.63717 24.63717 0 0 1 0.66198-3.022083l76.444303-269.584172a25.126459 25.126459 0 0 1 38.351669-13.944753l151.391955 102.722032a22.392194 22.392194 0 0 1 1.98594 1.439087l45.719794 38.092633a25.153802 25.153802 0 1 1-32.163595 38.682659l-44.755606-37.286744-121.602853-82.488469-66.514603 234.571185-21.34166 138.684817 92.619641-82.387732a25.155241 25.155241 0 0 1 33.4156 37.603343l-144.829718 128.769507a25.169632 25.169632 0 0 1-16.722191 6.317592z"
                            fill="#0E4F53" p-id="5287"/>
                        <path
                            d="M540.132532 1023.971218a25.14085 25.14085 0 0 1-24.924987-22.104376l-80.473746-659.8214a25.14085 25.14085 0 0 1 36.207429-25.543795l64.370363 32.177986a25.227196 25.227196 0 0 1 11.167315 11.095361l106.406095 209.243253a25.14085 25.14085 0 1 1-44.827561 22.780747L505.407362 389.952649l-15.139195-7.540816 74.832525 613.396452a25.169632 25.169632 0 0 1-21.917295 28.019025 27.803161 27.803161 0 0 1-3.050865 0.143908z"
                            fill="#0E4F53" p-id="5288"/>
                        <path
                            d="M521.928081 874.133477a25.414277 25.414277 0 0 1-8.634522-1.439087L306.237718 797.171103a25.165315 25.165315 0 0 1 17.269045-47.274008l207.055841 75.480114a25.14085 25.14085 0 0 1-8.634523 48.770659z"
                            fill="#0E4F53" p-id="5289"/>
                    </svg>
                </h2>

                <div className="register_input_box">
                    <small>  用户名已存在</small>

                    <input type="text" name="username" placeholder="  用户名"/>
                    <svg t="1636822171487" className="username_valid_icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="6939" width="200" height="200">
                        <path
                            d="M800.5 512c0 159.3-129.1 288.5-288.5 288.5-99.6 0-187.4-50.4-239.2-127.2-31.1-46-49.3-101.5-49.3-161.3 0-159.3 129.1-288.5 288.5-288.5S800.5 352.7 800.5 512z"
                            fill="#00F0D4" p-id="6940"/>
                        <path
                            d="M475.8 633.1c-6.2 0-12.5-1.9-17.8-5.8l-94.9-69.9c-13.3-9.8-16.2-28.6-6.4-41.9s28.6-16.2 41.9-6.4l73.9 54.4 151.1-155c11.6-11.9 30.6-12.1 42.4-0.5 11.9 11.6 12.1 30.6 0.5 42.4L497.3 624c-5.9 6-13.7 9.1-21.5 9.1z"
                            fill="#FFFFFF" p-id="6941"/>
                    </svg>
                    <svg t="1636822909338" className="username_wrong_icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="10563" width="200" height="200">
                        <path d="M512 512m-435.2 0a435.2 435.2 0 1 0 870.4 0 435.2 435.2 0 1 0-870.4 0Z" fill="#FE6D68"
                              p-id="10564"/>
                        <path
                            d="M563.2 512l108.8-108.8c12.8-12.8 12.8-38.4 0-51.2-12.8-12.8-38.4-12.8-51.2 0L512 460.8 403.2 352c-12.8-12.8-38.4-12.8-51.2 0-12.8 12.8-12.8 38.4 0 51.2L460.8 512 352 620.8c-12.8 12.8-12.8 38.4 0 51.2 12.8 12.8 38.4 12.8 51.2 0L512 563.2l108.8 108.8c12.8 12.8 38.4 12.8 51.2 0 12.8-12.8 12.8-38.4 0-51.2L563.2 512z"
                            fill="#FFFFFF" p-id="10565"/>
                    </svg>
                    <br/>

                    <input type="password" name="password" placeholder="  密码"/><br/>

                    <input type="password" name="confirmPassword" placeholder="  确认密码"/>
                    <svg t="1636822171487" className="password_valid_icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="6939" width="200" height="200">
                        <path
                            d="M800.5 512c0 159.3-129.1 288.5-288.5 288.5-99.6 0-187.4-50.4-239.2-127.2-31.1-46-49.3-101.5-49.3-161.3 0-159.3 129.1-288.5 288.5-288.5S800.5 352.7 800.5 512z"
                            fill="#00F0D4" p-id="6940"/>
                        <path
                            d="M475.8 633.1c-6.2 0-12.5-1.9-17.8-5.8l-94.9-69.9c-13.3-9.8-16.2-28.6-6.4-41.9s28.6-16.2 41.9-6.4l73.9 54.4 151.1-155c11.6-11.9 30.6-12.1 42.4-0.5 11.9 11.6 12.1 30.6 0.5 42.4L497.3 624c-5.9 6-13.7 9.1-21.5 9.1z"
                            fill="#FFFFFF" p-id="6941"/>
                    </svg>
                    <svg t="1636822909338" className="password_wrong_icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="10563" width="200" height="200">
                        <path d="M512 512m-435.2 0a435.2 435.2 0 1 0 870.4 0 435.2 435.2 0 1 0-870.4 0Z" fill="#FE6D68"
                              p-id="10564"/>
                        <path
                            d="M563.2 512l108.8-108.8c12.8-12.8 12.8-38.4 0-51.2-12.8-12.8-38.4-12.8-51.2 0L512 460.8 403.2 352c-12.8-12.8-38.4-12.8-51.2 0-12.8 12.8-12.8 38.4 0 51.2L460.8 512 352 620.8c-12.8 12.8-12.8 38.4 0 51.2 12.8 12.8 38.4 12.8 51.2 0L512 563.2l108.8 108.8c12.8 12.8 38.4 12.8 51.2 0 12.8-12.8 12.8-38.4 0-51.2L563.2 512z"
                            fill="#FFFFFF" p-id="10565"/>
                    </svg>
                    <br/>

                    <input type="text" name="email" placeholder="  邮箱"/>
                    <svg t="1636822171487" className="email_valid_icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="6939" width="200" height="200">
                        <path
                            d="M800.5 512c0 159.3-129.1 288.5-288.5 288.5-99.6 0-187.4-50.4-239.2-127.2-31.1-46-49.3-101.5-49.3-161.3 0-159.3 129.1-288.5 288.5-288.5S800.5 352.7 800.5 512z"
                            fill="#00F0D4" p-id="6940"/>
                        <path
                            d="M475.8 633.1c-6.2 0-12.5-1.9-17.8-5.8l-94.9-69.9c-13.3-9.8-16.2-28.6-6.4-41.9s28.6-16.2 41.9-6.4l73.9 54.4 151.1-155c11.6-11.9 30.6-12.1 42.4-0.5 11.9 11.6 12.1 30.6 0.5 42.4L497.3 624c-5.9 6-13.7 9.1-21.5 9.1z"
                            fill="#FFFFFF" p-id="6941"/>
                    </svg>
                    <svg t="1636822909338" className="email_wrong_icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="10563" width="200" height="200">
                        <path d="M512 512m-435.2 0a435.2 435.2 0 1 0 870.4 0 435.2 435.2 0 1 0-870.4 0Z" fill="#FE6D68"
                              p-id="10564"/>
                        <path
                            d="M563.2 512l108.8-108.8c12.8-12.8 12.8-38.4 0-51.2-12.8-12.8-38.4-12.8-51.2 0L512 460.8 403.2 352c-12.8-12.8-38.4-12.8-51.2 0-12.8 12.8-12.8 38.4 0 51.2L460.8 512 352 620.8c-12.8 12.8-12.8 38.4 0 51.2 12.8 12.8 38.4 12.8 51.2 0L512 563.2l108.8 108.8c12.8 12.8 38.4 12.8 51.2 0 12.8-12.8 12.8-38.4 0-51.2L563.2 512z"
                            fill="#FFFFFF" p-id="10565"/>
                    </svg>
                    <br/>
                </div>

                <NavLink to='/login'>
                    {/*className命名规范：短小精悍，必须以字母开头命名，且全部字母都为小写，单词之间统一使用下划线 "_" */}
                    <button className="register_info_btn">注册</button>
                </NavLink><br/><br/>
                {/*<NavLink to='/login'>*/}
                {/*    <button className="back_logon_btn">登录</button>*/}
                {/*</NavLink>*/}

            </div>
        );
    }
}

export default Register;